<template>
    <div class="menu-aside" :class="{ 'translate-left': menuFlag, 'translate-right': !menuFlag }">
        <i @click="hideMenu" v-show="!menuFlag" class="el-icon-s-fold fold-expand"></i>
        <i @click="showMenu" v-show="menuFlag" class="el-icon-s-unfold fold-expand"></i>
        <el-row>
            <el-col :span="24">
                <div class="menu-avatar">
                    <img class="avatar" :src="require('@/assets/img/logo.png')" />
                </div>
                <el-menu :default-active="$route.name" text-color="rgba(256,256,256, .65)">
                    <el-menu-item
                        v-for="(menu, index) in menuList.slice(0, 4)"
                        :index="`${index}`"
                        :key="index"
                        @click="expandMenu(menu)"
                    >
                        <i :class="menu.icont"></i>
                        <span>{{ menu.name }}</span>
                    </el-menu-item>
                    <!-- 账户管理 -->
                    <el-submenu index="5">
                        <template slot="title">
                            <i :class="menuList[menuList.length - 1].icont"></i>
                            <span>
                                {{ menuList[menuList.length - 1].name }}
                            </span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item
                                :index="item.routeName"
                                v-for="item in menuList[menuList.length - 1].menuItem"
                                :key="item.index"
                                @click="expandMenu(item)"
                            >
                                {{ item.name }}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'Aside',
    data() {
        return {
            menuFlag: false,
            menuList: [
                {
                    icont: 'el-icon-edit-outline',
                    name: '工单管理',
                    routeName: 'OrderManage',
                    title: '工单管理'
                },
                {
                    icont: 'el-icon-tickets',
                    name: '工程预算清单',
                    routeName: 'ProjectBudgetDetail',
                    title: '工程预算清单'
                },
                {
                    icont: 'el-icon-tickets',
                    name: '施工任务',
                    routeName: 'ConstrctionTask',
                    title: '施工任务'
                },
                {
                    icont: 'el-icon-document',
                    name: '验收申请',
                    title: '验收申请',
                    routeName: 'CheckApplication'
                },
                {
                    icont: 'el-icon-user',
                    name: '账户管理',
                    menuItem: [
                        {
                            title: '修改密码',
                            routeName: 'ChangeScret',
                            name: '修改密码'
                        },
                        {
                            title: '子账号管理',
                            routeName: 'ChildAccountMange',
                            name: '子账号管理'
                        }
                    ]
                }
            ]
        };
    },
    methods: {
        // 隐藏菜单
        hideMenu() {
            this.menuFlag = true;
        },
        // 显示菜单
        showMenu() {
            this.menuFlag = false;
        },
        expandMenu(item) {
            this.$store.commit('editableTabs', item);
        }
    }
};
</script>

<style scoped lang="less">
.menu-aside {
    position: relative;
    width: 208px;
    height: 100%;
    background: #181c21;
    box-shadow: 2px 0px 6px 0px rgba(0, 21, 41, 0.35);
    .menu-avatar {
        height: 64px;
        display: flex;
        justify-content: center;
        align-items: center;
        .avatar {
            width: 125px;
            height: 34px;
        }
    }
    .fold-expand {
        position: absolute;
        right: -35px;
        top: 15px;
        cursor: pointer;
        width: 20px;
        height: 20px;
        color: rgba(0, 0, 0, 0.65);
    }
    /deep/ .el-submenu__title:hover {
        opacity: 1;
        background: rgba(0, 119, 255, 0.25) !important;
    }
    /deep/ .el-menu-item:focus {
        background-color: transparent !important;
    }
    /deep/ .el-menu-item:hover {
        opacity: 1;
        background: rgba(0, 119, 255, 0.25) !important;
    }
    /deep/ .el-submenu__title {
        height: 48px !important;
        line-height: 48px;
        font-size: 14px;
        font-family: SourceHanSansCN, SourceHanSansCN-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
    }
    /deep/ .el-menu-item {
        height: 48px !important;
        line-height: 48px;
        font-size: 14px;
        font-family: SourceHanSansCN, SourceHanSansCN-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
    }
    /deep/ .el-menu {
        background-color: transparent !important;
        border: none;
    }
}
.translate-left {
    transform: translateX(-208px);
    transition: 0.6s;
}
.translate-right {
    transform: translateX(0);
    transition: 0.6s;
}
</style>
